<template>
  <div class="SignUpDetail" :style="mystyle">
    <div class="back" v-if="isWechat===false">
      <button class="back_icon" @click="back"></button>
    </div>
    <img src="../assets/bg_selectGrade_01.jpg" class="bg_chooseGrade1" alt="">
    <div class="choose_school">
      <img src="../assets/bg_selectGrade_02.jpg" class="bg_chooseGrade" alt="">
      <div class="school_btn_box">
        <button class="school_primary" v-if="school !== 1" @click="chooseSchool(1)"></button>
        <button class="school_primary_selected" v-if="school === 1"></button>
        <button class="school_middle" v-if="school !== 2" @click="chooseSchool(2)"></button>
        <button class="school_middle_selected" v-if="school === 2"></button>
        <button class="school_high" v-if="school !== 3" @click="chooseSchool(3)"></button>
        <button class="school_high_selected" v-if="school === 3"></button>
      </div>
      <div class="grade_btn_box">
        <transition v-for="(item, index) of primaryBtnArr" :key="index" enter-active-class="animated bounceInLeft">
          <div class="aaaa">
            <button :class="'grade_' + (index + 1)" v-if="school === 1" v-show="grade !== index + 1" @click="chooseGrade(index + 1)"></button>
          </div>
        </transition>
        <transition v-for="(item, index) of primaryBtnArr" :key="index" enter-active-class="animated bounceIn" leave-active-class="bounceOutRight">
          <button :class="'grade_' + (index + 1) + '_selected'" v-if="school === 1" v-show="grade === index + 1"></button>
        </transition>
        <transition v-for="(item, index) of middleBtnArr" :key="index" enter-active-class="animated bounceInRight">
          <button :class="'grade_' + (index + 7)" v-if="school === 2" v-show="grade !== index + 7" @click="chooseGrade(index + 7)"></button>
        </transition>
        <transition v-for="(item, index) of middleBtnArr" :key="index" enter-active-class="animated bounceIn" leave-active-class="bounceOutLeft">
          <button :class="'grade_' + (index + 7) + '_selected'" v-if="school === 2" v-show="grade === index + 7"></button>
        </transition>
        <transition v-for="(item, index) of middleBtnArr" :key="index" enter-active-class="animated bounceInUp">
          <button :class="'grade_' + (index + 10)" v-if="school === 3" v-show="grade !== index + 10" @click="chooseGrade(index + 10)"></button>
        </transition>
        <transition v-for="(item, index) of middleBtnArr" :key="index" enter-active-class="animated bounceIn" leave-active-class="bounceOutDown">
          <button :class="'grade_' + (index + 10) + '_selected'" v-if="school === 3" v-show="grade === index + 10"></button>
        </transition>
      </div>
      <button v-show="school !== 0 && grade !== 0" class="btn_sure_choosegrade" @click="showResult=true"></button>
    </div>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <div class="sure_grade" v-if="showResult">
        <img src="../assets/sure_alert.png" class="sure_alert" alt="">
        <div :class="grade <= 6 ? 'gradeText gradeText_primary' : grade <= 9 ? 'gradeText gradeText_middle' : 'gradeText gradeText_high' ">
          {{gradeArr[grade - 1]}}
        </div>
        <p class="ruleText">
          年级选定后将无法修改,如果所选信息不属实,将取消活动参与资格!
        </p>
        <div class="btn_wrap">
          <button class="btn_reChoose" @click="reChoose"></button><button class="btn_sureGrade" @click="confirmChoose"></button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {signUp} from '../request/question'
import GetToken from '../util/getToken'
import {mapGetters} from 'vuex'
import {Indicator, Toast} from 'mint-ui'
export default {
  name: 'SignUpDetail',
  data () {
    return {
      school: 0,
      grade: 0,
      showResult: false,
      gradeArr: [
        '小学一年级',
        '小学二年级',
        '小学三年级',
        '小学四年级',
        '小学五年级',
        '小学六年级',
        '初中一年级',
        '初中二年级',
        '初中三年级',
        '高中一年级',
        '高中二年级',
        '高中三年级'
      ],
      primaryBtnArr: ['', '', '', '', '', ''],
      middleBtnArr: ['', '', ''],
      team: 0,
      x: '',
      y: '',
      slideUp: 0,
      canClick: true,
      mystyle: {}
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  created () {
    if (this.$debugToken) {
      this.$store.dispatch('getToken', this.$debugToken)
    }
    if (!this.token) {
      GetToken.getToken(this).then((data) => {
        this.$store.dispatch('getToken', data.tokenString)
      })
    }
  },
  mounted () {
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.mystyle = {
        'overflow': 'auto'
      }
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    chooseSchool (num) {
      for (let i = 0; i < 9999; i++) {
        clearInterval(i)
      }
      this.chargeIpad()
      this.school = num
      this.grade = 0
    },
    chooseGrade (num) {
      this.grade = num
      if (num < 3) { // 一至二年级
        this.team = 0
      } else if (num < 5) { // 3至4年级
        this.team = 1
      } else if (num < 7) { // 5至6年级
        this.team = 2
      } else if (num < 9) { // 7至8年级
        this.team = 3
      } else if (num === 9) { // 9年级
        this.team = 4
      } else if (num > 9) { // 高中
        this.team = 5
      }
    },
    reChoose () {
      this.grade = 0
      this.team = 0
      this.showResult = false
    },
    confirmChoose () {
      if (!this.canClick) {
        return
      }
      this.canClick = false
      this.showResult = false
      Indicator.open({
        text: '正在填写报名信息...',
        spinnerType: 'double-bounce'
      })
      let t
      if (this.$route.query.t) {
        t = this.$route.query.t
      } else {
        t = this.token
      }
      signUp({tokenString: t, team: this.team, grade: this.grade - 1}).then((data) => {
        Indicator.close()
        Toast({
          message: '报名成功',
          duration: 1500
        })
        this.$router.push({name: 'SignUp', query: {token: t}})
      })
    },
    chargeIpad () {
      if (window.innerWidth >= 768 && window.innerHeight >= 1024) {
        let Box = document.getElementsByClassName('SignUpDetail')[0]
        let boxScrollTop = Box.scrollTop
        if (boxScrollTop < 320) {
          let scrollTop = boxScrollTop
          setInterval(() => {
            scrollTop += 15
            if (scrollTop >= 320) {
              for (let i = 0; i < 9999; i++) {
                clearInterval(i)
              }
            }
            document.getElementsByClassName('SignUpDetail')[0].scrollTo(0, scrollTop)
          }, 20)
        }
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/signupdetail';
</style>
